<script setup lang="ts">
// import { getOptions } from '../../../utils/index.js'
import type { FormItemTool } from '../../../types/index.js'

type IProps = {
  item: FormItemTool<'switch'>
  allDisabled: boolean
  isEditByRow: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  isEditByRow: true,
})
const { item, allDisabled } = toRefs(props)
const value = defineModel<any>('value')
const elRef = useTemplateRef('elRef')
const getRef = () => {
  return elRef.value
}
defineExpose({
  getRef,
})
const attrs = useAttrs()
</script>
<template>
<span class="w-full">
  <el-switch
    v-if="isEditByRow"
    ref="elRef"
    :disabled="allDisabled"
    v-model="value"
    v-bind="{...item.config, ...attrs}"
    v-on="item.eventFunction || {}"
  />
  <span v-else>
    {{ value === (item?.config?.activeValue || true) ? item?.config?.activeText ?? '是' : item?.config?.inactiveText ?? '否' }}
  </span>
</span>
</template>

<style scoped lang="scss"></style>
